<template>
  <div
    class="content"
 
  >
   <div :ref="echartsMap" id="mainChina"></div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted, watch } from "vue";
import "echarts";
	echarts.env.touchEventsSupported = true;
	echarts.env.wxa = false;
	echarts.env.canvasSupported = false;
	echarts.env.svgSupported = true;
	echarts.env.domSupported = true;
const state = reactive({
  option: {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: "3%",
      right: "10%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      name: "(个)",
      nameLocation: "end",
      nameGap: 35,
      boundaryGap: [0, 0.01],
      position: "top",
      nameTextStyle: {
        fontSize: 12,
        color: "#999999",
      },
      axisLabel: {
        color: "#D3E4FE",
      },
      splitLine: {
        lineStyle: {
          color: "#073370",
          width: 1,
          type: "dashed",
        },
      },
    },
    yAxis: {
      type: "category",
      axisTick: { show: false },

      data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
      axisLabel: {
        color: "#D3E4FE",
      },
      axisLine: {
        lineStyle: {
          color: "#073370",
          width: 1,
        },
      },
    },
    series: [
      {
        name: "2011",
        barWidth: 8,
        type: "bar",
        data: [1000, 2348, 2904, 1049, 1744, 6230],
        label: {
          show: true,
          precision: 1,
          position: "right",
          valueAnimation: true,
          color: "#D3E4FE",
          fontFamily: "monospace",
        },
        itemStyle: {
          barBorderRadius: [10, 10, 10, 10],
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: "rgba(63,117,255,0)" },
              { offset: 1, color:"#0063FA" },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      {
        name: "外圆",
        type: "scatter",
        emphasis: {
          scale: false,
        },
        symbol: "circle",
        symbolSize: [10, 10], // 进度条白点
        itemStyle: {
          show: true,
          barBorderRadius: [10, 10, 10, 10],
          color: "#77BEFF",
          shadowColor: "#3F75FF",
          shadowBlur: 11,
          // shadowOffsetY: 5,
          // shadowOffsetX: 5,
          borderWidth: 1,
          opacity: 1,
        },
        z: 2,
        data: [1000, 2348, 2904, 1049, 1744, 6230],
        animationDelay: 500,
      },
    ],
  },
});
let echartsMapel = ref("");
let opt = null;
const echartsMap = (e) => (echartsMapel.value = e);
const init = () => {
  let myChart = echarts.init(echartsMapel.value);
  myChart.setOption(state.option);
  const setOption = (dataObj) => {
    let opt = myChart.getOption();
    Object.assign(opt, dataObj);
    myChart.setOption(opt);
  };
  return setOption;
};

onMounted(() => {
init();
});
</script>

<style scoped >
.content {
  position: relative;
  margin: 20px;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
}
#mainChina {
  width: 100%;
  height: 600px;
  background-color: #00184F;
  
}
</style>
